<template>
    <Head />
    <div>
        <div class="MuiStack">
            <div class="gradientShadow"></div>
            <div class="headImageWrapper">
                <div class="headImage"></div>
            </div>
            <div class="headingContainer">
                <div class="MuiStack">
                </div>
            </div>
        </div>

        <div class="MuiContainer">
            <div :class="['offersWrapper', localStorage.get('lang')]">
                <button class="offer">
                    <div class="offerName">Z3</div>
                    <div class="offerPrice">3{{ $t('tenThousand') }}BT2</div>
                </button>
                <button class="offer">
                    <div class="offerName">Z10</div>
                    <div class="offerPrice">10{{ $t('tenThousand') }}BT2</div>
                </button>
                <button class="offer">
                    <div class="offerName">Z30</div>
                    <div class="offerPrice">30{{ $t('tenThousand') }}BT2</div>
                </button>
                <button class="offer">
                    <div class="offerName">Z50</div>
                    <div class="offerPrice">50{{ $t('tenThousand') }}BT2</div>
                </button>
            </div>
        </div>

        <div class="MuiContainer mt-5">
            <div class="headingWrapper">
                <div class="heading">
                    {{ $t("contractAddress") }}
                </div>
                <div class="container">
                    <div type="text" class="card-input" :value="address" :disabled="true">
                        {{ address }}
                    </div>
                    <div class="copy" @click="onCopy()" >{{$t('copy')}}</div>
                    <!-- <img src="@/assets/image/copy.svg" @click="onCopy()" /> -->
                </div>
                <div class="container">
                    <div :class="['offersWrapper1', localStorage.get('lang')]">
                        <button class="offer">
                            <div class="offerName">
                                {{ $t("contractTips") }}
                            </div>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { localStorage } from "@/utils/local-storage";
import { showToast } from "vant";
import clipboard3 from "vue-clipboard3";
const { toClipboard } = clipboard3();
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const address = "0xb315fA7699013baE4C87ED7a7D9ea9Eb80f41Cf8"
const onCopy = async () => {
    await toClipboard(address);
    showToast(t("copySuccess"));
};
</script>
<style scoped lang="scss">
$theme: #59e457;

.MuiStack {
    display: flex;
    flex-direction: column;
    position: relative;

    .gradientShadow {
        box-shadow: 0 -30px 70px 10px #59e457;
        position: absolute;
        top: 100px;
        width: 100%;
    }

    .headImageWrapper {
        background-color: #000;

        .headImage {
            background-color: #000;
            background-image: url("@/assets/image/contractBg.png");
            background-position: right 96px;
            background-repeat: no-repeat;
            height: 336px;
        }
    }

    .headingContainer {
        position: absolute;
        top: 100px;
        width: 100%;
        margin-left: auto;
        box-sizing: border-box;
        margin-right: auto;
        display: block;
        padding-left: 16px;
        padding-right: 16px;

        .MuiStack {
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .headImagePara {
                word-wrap: break-word;
                color: #fff;
                font-family: Inter-Regular;
                font-size: 1.01rem;
                font-weight: 400;
                margin-top: 8px;
            }

            .btn {
                height: 40px;
                align-items: center;
                background: #59e457;
                border-color: #59e457;
                border-radius: 5px;
                display: inline-flex;
                justify-content: center;
                margin-top: 1.2rem !important;
                padding: 7px 28px;
                color: #000;
            }
        }
    }
}

.MuiContainer {
    width: 100%;
    margin-left: auto;
    box-sizing: border-box;
    margin-right: auto;
    display: block;
    padding-left: 16px;
    padding-right: 16px;

    .headingWrapper {
        background: $theme;
        border: 1px solid $theme;
        border-radius: 5px;
        margin-bottom: 20px;
        padding: 1.5rem 1.5rem;

        .heading {
            word-wrap: break-word;
            border-bottom: 0.5px solid #000;
            color: #0c0c0c;
            font-family: Ethnocentric;
            font-size: 1.25rem;
            line-height: 1.25rem;
            padding-bottom: 0.45rem;
            text-align: center;
            width: 100%;
            font-weight: bold;
        }

        .MuiGrid-container {
            box-sizing: border-box;
            display: flex;
            flex-flow: wrap;
            width: 100%;
            margin-top: 8px;

            .totalSubWrapper {
                box-sizing: border-box;
                margin: 0px;
                flex-direction: row;
                flex-basis: 50%;
                -webkit-box-flex: 0;
                flex-grow: 0;
                max-width: 50%;

                background-image: url("@/assets/image/maskGroup1.svg");
                background-position: 30% 100%;
                background-repeat: no-repeat;
                border-right: 0.5px solid #000;
            }

            .activeSubWrapper {
                box-sizing: border-box;
                margin: 0px;
                flex-direction: row;
                flex-basis: 50%;
                -webkit-box-flex: 0;
                flex-grow: 0;
                max-width: 50%;
                background-image: url("@/assets/image/maskGroup2.svg");
                background-position: 30% 100%;
                background-repeat: no-repeat;
            }

            .totalSubText,
            .totalSubs {
                word-wrap: break-word;
                color: #000;
                display: flex;
                justify-content: flex-end;
                text-decoration: none;
                padding: 8px 16px;
            }

            .totalSubText {
                font-family: Inter-Regular;
                font-size: 0.75rem;
                font-weight: 400;
                opacity: 0.5;
                padding-left: 10px;
                padding-right: 10px;
                text-align: right;
            }

            .totalSubs {
                font-family: Inter-Bold;
                font-size: 1.2rem;
                font-weight: 700;
                text-align: center;
            }
        }
    }

    .offersWrapper {
        align-items: center;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        justify-content: center;
        margin-top: 16px;

        .offer {
            background: #1a1d1a;
            border: 1px solid #1a1d1a;
            border-radius: 5px;
            flex: 1 1;
            padding: 20px 8px;
            text-align: center;
            height: 100%;

            .offerName {
                word-wrap: break-word;
                color: #fff;
                font-family: Inter-Bold;
                font-size: 15px;
                font-weight: 700;
                margin-bottom: 4px;
            }

            .offerPrice {
                word-wrap: break-word;
                color: #59e457;
                font-family: Inter-Regular;
                font-size: 13px;
                font-weight: 400;
            }
        }

        &.en {
            .offerPrice {
                font-size: 10px;
            }
        }
    }

    .offersWrapper1 {
        align-items: center;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;

        // margin-top: 16px;
        .offer {
            background: #1b441a;
            border: 1px solid #1b441a;
            border-radius: 5px;
            flex: 1 1;
            padding: 8px 8px;
            text-align: left;
            height: 100%;

            .offerName {
                word-wrap: break-word;
                color: #fff;
                font-family: Inter-Bold;
                font-size: 14px;
                margin-bottom: 4px;
            }
        }


    }

}

.subscriptionOptionWrapper {
    background: #1a1d1a;
    border: 1px solid #1a1d1a;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding: 20px 20px 20px 20px;
    margin-top: 20px;

    .greenButtonWrapper {
        align-items: center;
        background: #1a1d1a;
        border-radius: 11px;
        display: inline-flex;
        gap: 10px;
        font-size: 12px;
        justify-content: center;
        padding: 12px 20px;
        color: #858585;

        &:first-child {
            background: #59e457;
            color: #000;
        }
    }
}

hr {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 95%;
}

.content {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: #1a1d1a;
    padding: 20px;
    box-sizing: border-box;

    .item {
        color: #fff;
        background: #444444;
        border-radius: 4px;
        padding: 10px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0px;
        }
    }
}

.nodata {
    display: flex;
    justify-content: center;
    color: #969799;
    font-size: 14px;
    align-items: center;
    margin-top: 40px;
}

.container {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;

    .card-input {
        background: #000000b3;
        border: 1px solid #59e457;
        border-radius: 5px;
        color: #fff;
        padding: 7px;
        height: 40px;
        width: 95%;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
    }

    img {
        margin-left: 16px;
    }
}
.copy{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #000;
  width: 20%;
}
</style>
  